<!-- START panel-->
<div class="panel" style="padding:20px;padding-bottom:0">
	<div class="panel-body">
		<p class="head-p">分组管理</p>
		<div class="row">
			<!--<div class="col-lg-9">-->
				<div class="col-md-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="showEditModal('name', 'new')">新增</button>
				</div>
				<div class="col-md-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="showEditModal('name', 'edit')">编辑</button>
				</div>
				<div class="col-md-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="showEditModal('select', 'node')">选择节点</button>
				</div>
				<div class="col-md-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="showEditModal('select', 'member')">选择人员</button>
				</div>
				<div class="col-md-2 col-xs-6">
					<button class="btn btn-default btn-block btn-color" (click)="showEditModal('delete', '')">删除</button>
				</div>
			<!--</div>-->
			<!--<div class="col-lg-3">
				<div class="form-inline" style="padding-left:15px">
					<div class="form-group has-feedback pull-left">
						<input type="text" class="form-control" placeholder="请输入账号搜索" autocomplete="off">
						<span class="glyphicon glyphicon-search form-control-feedback"></span>
					</div>
				</div>
			</div>-->
		</div>
		<div style="border-top:2px solid #E3F7FC;width:100%;margin-top:20px"></div>
		<!-- START table-responsive-->
		<div class="table-responsive" style="min-height:360px">
			<table class="table  table-hover table-bordered table-striped">
				<thead>
					<tr>
						<td style="width:6%"></td>
						<th style="width:15%">项目名称</th>
						<th style="width:30%">节点列表</th>
						<th style="width:30%">人员</th>
						<th>创建时间</th>
					</tr>
				</thead>
				<tbody #accountInput>
					<tr *ngFor="let itemList of tabledatas.pageInfo">
						<td>
							<div class="radio c-radio margin-null" style="width:100%;padding-left:32%">
								<label>
									<input type="radio" name="account" [id]="itemList.areaId" [value]="itemList.areaName"/>
									<span class="fa fa-circle"></span>
                            	</label>
							</div>
						</td>
						<td>{{itemList.areaName}}</td>
						<td>{{itemList.nodesStr}}</td>
						<td>{{itemList.usersStr}}</td>
						<td>{{itemList.createTime}}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!--分页-->
		<div class="text-right">
			<pagination *ngIf="config.paging" class="pagination-sm" [(ngModel)]="config.page" [totalItems]="config.length" [itemsPerPage]="config.itemsPerPage"
			 [maxSize]="config.maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" (numPages)="numPages = $event"
			 [firstText]="config.firstText" [previousText]="config.previousText" [nextText]="config.nextText" [lastText]="config.lastText">
			</pagination>
		</div>
	</div>
</div>
<!-- modal start -->
<div class="modal fade" bsModal #editGroupModal="bs-modal" [config]="{backdrop: false}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
 aria-hidden="true">
	<div class="modal-dialog modal-md">
		<div class="modal-content modal-content-mark">
			<div class="modal-header">
				<button type="button" class="close" aria-label="Close" (click)="editGroupModal.hide();">
                    <span aria-hidden="true">&times;</span>
                </button>
				<h4 class="modal-title">{{displayMsg.header}}</h4>
			</div>
			<div class="modal-body">
				<!--项目名称编辑界面-->
				<div *ngIf="displayMsg.type==='name'">
					<form class="form-horizontal" (ngSubmit)="editGroupName(displayMsg.action)" #editGroup="ngForm">
						<div class="form-group">
							<label for="proName" class="col-sm-4 control-label">项目名称:</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" maxLength="10"  [(ngModel)]="areaName" #nodeAccount="ngModel" name="proName" required placeholder="请输入项目名称!">
							</div>
						</div>
						<div class="form-group text-right">
							<div class="col-sm-offset-6 col-sm-2">
								<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="editGroupModal.hide()">取消</button>
							</div>
							<div class="col-sm-2">
								<button class="mb-sm btn btn-primary btn-outline" [disabled]="!editGroup.form.valid" type="submit">{{displayMsg.confirmBtn}}</button>
							</div>
						</div>
					</form>
				</div>
				<!--节点及人员选择界面-->
				<div *ngIf="displayMsg.type==='select'">
					<div style="max-height:400px;margin-bottom:20px;overflow-y:auto">
						<!--节点选择-->
						<table class="table  table-hover table-striped scrolltable" *ngIf="displayMsg.action==='node'">
							<thead>
								<tr>
									<th checkAll>
										<div class="checkbox c-checkbox">
											<label>
										<input type="checkbox" />
										<span class="fa fa-check"></span>
                            		</label>
										</div>
									</th>
									<th>节点名称</th>
									<th>区域</th>
									<th>节点带宽</th>
									<th>SWAN账号</th>
									<th>SWAN密码</th>
								</tr>
							</thead>
							<tbody #selectedIds>
								<tr *ngFor="let nodeList of modalTableInfo.nodesInfo">
									<td>
										<div class="checkbox c-checkbox">
											<label>
                                				<input type="checkbox" name="account"  [checked]="nodeList.checked" [id]="nodeList.nodeId" [value]="nodeList.custId"/>
                                				<span class="fa fa-check"></span>
                            				</label>
										</div>
									</td>
									<td>{{nodeList.nodeName}}</td>
									<td>{{nodeList.areaName}}</td>
									<td>{{nodeList.bandWidth}}</td>
									<td>{{nodeList.nodeAccount}}</td>
									<td>{{nodeList.nodeAcctPwd}}</td>
								</tr>
							</tbody>
						</table>
						<!--人员选择-->
						<table class="table  table-hover table-striped" *ngIf="displayMsg.action==='member'">
							<thead>
								<tr>
									<th checkAll>
										<div class="checkbox c-checkbox">
											<label>
										<input type="checkbox" />
										<span class="fa fa-check"></span>
                            		</label>
										</div>
									</th>
									<th>账号</th>
									<th>名称</th>
									<th>邮箱</th>
									<th>手机</th>
								</tr>
							</thead>
							<tbody #selectedIds>
								<tr *ngFor="let memberList of modalTableInfo.membersInfo">
									<td>
										<div class="checkbox c-checkbox">
											<label>
                                				<input type="checkbox" name="account" [checked]="memberList.checked" [id]="memberList.userId" [value]="memberList.custId"/>
                                				<span class="fa fa-check"></span>
                            				</label>
										</div>
									</td>
									<td>{{memberList.account}}</td>
									<td>{{memberList.userName}}</td>
									<td>{{memberList.email}}</td>
									<td>{{memberList.mobile}}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="row">
						<div class="col-sm-offset-8 col-sm-2">
							<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="displayMsg.action='';editGroupModal.hide()">取消</button>
						</div>
						<div class="col-sm-2">
							<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="displayMsg.action==='member'?memberManage():nodeManage()">{{displayMsg.confirmBtn}}</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- modal end -->
